<template>
    <div class="app-contianer">
        <div class="app-content">
            <div class="logo-show"> <img src="@/assets/images/logo1.png" alt=""> </div>

            <div class="secion-login-box">
                <div class="wx-login-in">
                    <div class="wx-qr-code" id="login_container">
                        <!-- <img src="" alt="">  -->
                    </div>
                    <div class="wx-code-login">请使用微信扫码登录</div>
                </div>
                <div class="section-box">
                    <div class="section-top">
                        <div class="section-title">账号密码登录</div>
                        <div class="section-to-logo" @click="toRegister">前往注册</div>
                    </div>
                    <el-form ref="form" :model="formData" :rules="rules" size="large">
                        <el-form-item label="" class="item-input-box" prop="accountName">
                            <el-input v-model="formData.accountName" placeholder="请输入手机号码"  @keydown.enter="submitForm">
                                <template #prepend>手机号码</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="" class="item-input-box" prop="accountPassword">
                            <el-input v-model="formData.accountPassword" type="password" @keydown.enter="submitForm" show-password placeholder="请输入密码">
                                <template #prepend>登录密码</template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div class="agreement-forgetPwd">
						<!--
                        <el-checkbox v-model="agreeProtocol">已阅读并同意<a
                                href="/cmsContent?title=用户服务协议">《用户服务协议》</a></el-checkbox>-->
						<div class="forget-pwd" @click="toIndex">返回首页</div>		
                        <div class="forget-pwd" @click="toForgetPwd">忘记密码</div>
                    </div>

                    <div class="flex-center login-btn">
                        <el-button type="primary" @click="submitForm" style="width: 296px" size="large">登录</el-button>
                    </div>
                </div>
            </div>

        </div>

        <div class="bg1"></div>
        <div class="bg2"></div>
        <div class="bg3"></div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { wxLogin } from '@/api/login'
import useUserStore from '@/store/modules/user'

const router = useRouter()
const userStore = useUserStore();
const wxCode = ref('')
const form = ref(null)
const formData = ref({
    accountName: '',
    accountPassword: ''
})
const rules = ref({
    accountName: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    accountPassword: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ],
})
const agreeProtocol = ref(false)

const submitForm = () => {
	/*
    if (!agreeProtocol.value) {
        ElMessage.warning('请阅读并同意用户服务协议')
        return
    }*/

    form.value.validate((valid) => {
        if (valid) {
            userStore
                .login(formData.value)
                .then(() => {
                    router.push({ path: '/index' });
                })
        } else {
            console.log('error submit')
        }
    })
}

const toRegister = () => {
    router.push('/register')
}

const toForgetPwd = () => {
    router.push('/forgetPassword')
}

const toIndex = () => {
    router.push('/index')
}

const wxLoginFn = () => {
    wxCode.value = new WxLogin({
        self_redirect: false,
        id: "login_container",
        appid: "wx865be3ae67da2c87",
        scope: "snsapi_login",
        redirect_uri: "https%3A%2F%2Fwww.wendudu.com%2F",
        state: "wxscan",
        style: "",
        href: "",
        stylelite: 1,
        onReady: function (isReady) {
            console.log(isReady);
        }
    })
}

onMounted(() => {
    wxLoginFn()
})
</script>

<style lang="scss" scoped>
.app-contianer {
    width: 100vw;
    height: 100vh;
    background-color: #F0F3F7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-content {
    background-color: #fff;
    width: 1280px;
    height: 700px;
    margin: 0 auto;
    padding: 32px 0 70px;
    position: relative;
    z-index: 10;
    border-radius: 10px;
    box-shadow: 0px 10px 30px 10px rgba(51, 133, 255, 0.1);

    .logo-show {
        position: absolute;
        top: 32px;
        left: 40px;
        width: 134px;
        height: 46px;
    }

    .secion-login-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wx-login-in {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 40px 40px 0;
        border-right: 1px solid rgba(233, 233, 233, 1);

        .wx-qr-code {
            width: 300px;
            height: 200px;
        }

        .wx-code-login {
            color: rgba(5, 11, 32, 1);
            font-size: 18px;
            font-weight: 400;
            line-height: 24px;
            margin-top: 40px;
            text-align: center;
        }
    }

    .section-box {
        width: 585px;
        margin-left: 86px;
    }

    .section-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;

        .section-title {
            font-size: 20px;
            font-weight: bold;
            color: #050B20;
        }

        .section-to-logo {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #666;
            cursor: pointer;

            &::after {
                content: "";
                display: block;
                width: 8px;
                height: 8px;
                border: 1px solid rgba(102, 102, 102, 1);
                border-left-color: transparent;
                border-bottom-color: transparent;
                transform: rotate(45deg);
                margin-left: 2px;
            }
        }
    }

    .agreement-forgetPwd {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .forget-pwd {
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #666;
            cursor: pointer;

            &::after {
                content: "";
                display: block;
                width: 8px;
                height: 8px;
                border: 1px solid rgba(102, 102, 102, 1);
                border-left-color: transparent;
                border-bottom-color: transparent;
                transform: rotate(45deg);
                margin-left: 2px;
            }
        }
    }

    .login-btn {
        margin-top: 50px;
        position: relative;
        z-index: 100;
    }

}

::v-deep .el-input-group__prepend {
    width: 120px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(5, 11, 32, 1);
    border-radius: 30px 0 0 30px;
}

::v-deep .el-input-group__append {
    border-radius: 0 30px 30px 0;
    background: rgba(51, 133, 255, 1);
    cursor: pointer;
    padding: 0;
}

.item-input-box {
    margin-bottom: 20px;

    &::v-deep .el-input__wrapper {
        border-radius: 0 30px 30px 0;
    }
}

.self-form-box {
    display: flex;
    align-items: center;
    width: 100%;

    .self-form-label {
        width: 120px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        box-shadow: 1px 0 0 0 #dcdfe6 inset, 0 1px 0 0 #dcdfe6 inset, 0 -1px 0 0 #dcdfe6 inset;
        font-size: 16px;
        font-weight: 600;
        color: rgba(5, 11, 32, 1);
        border-radius: 30px 0 0 30px;
        background-color: var(--el-fill-color-light);
    }
}

.bg1 {
    position: fixed;
    bottom: 0;
    left: calc((100vw - 2127px)/2);
    width: 2127px;
    height: 255px;
    background-image: url(@/assets/images/bg1.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 20;
    pointer-events: none;
}

.bg2 {
    position: fixed;
    bottom: 0;
    left: -15%;
    width: 150%;
    height: 223px;
    background-image: url(@/assets/images/bg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 25;
    pointer-events: none;
}

.bg3 {
    position: fixed;
    bottom: 0;
    left: calc((100vw - 2159px)/2);
    width: 2159px;
    height: 334px;
    background-image: url(@/assets/images/bg3.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 5;
    pointer-events: none;
}
</style>
